<template>
  <view class="audioPlayer" :class="[wrapClass]">
    <view class="player">
      <view class="audioControls">
        <view class="flex">
          <view class="hd" @tap="playAudio(current)">
            <!-- 按钮 -->
            <image class="image" v-if="isPlayAudio" :src="onUrl"> </image>
            <image class="image" :src="offUrl" v-else></image>
          </view>
          <view class="bd">
            <view class="slider">
              <slider
                @change="sliderChange"
                block-size="12"
                :value="audioTime"
                :activeColor="activeColor"
              />
            </view>

            <view class="time">
              <view class="bd">{{ showTime1 }}</view>
              <view class="ft">{{ showTime2 }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
const innerAudioContext = uni.createInnerAudioContext();
export default {
  data() {
    return {
      audioDuration: "",
      audioTime: 0,
      audioSeek: 0,
      isPlayAudio: "",
      showTime1: "00:00",
      showTime2: "00:00",
      imgBaseUrlV2,
      onUrl: imgBaseUrlV2 + "renmen_on.png",
      offUrl: imgBaseUrlV2 + "renmen_off.png",
    };
  },
  props: {
    current: "",
    src: "",
    wrapClass: "",
    activeColor: {
      type: String,
      default: "#F7BD3C",
    },
  },
  methods: {
    //初始化播放器，获取duration
    Initialization() {
      var vm = this;
      if (vm.src) {
        //设置src
        innerAudioContext.src = vm.src;

        //运行一次
        innerAudioContext.play();
        innerAudioContext.pause();
        innerAudioContext.onCanplay(() => {
          //初始化duration
          innerAudioContext.duration;
          setTimeout(function () {
            //延时获取音频真正的duration
            var duration = innerAudioContext.duration;
            var min = parseInt(duration / 60);
            var sec = parseInt(duration % 60);
            if (min.toString().length == 1) {
              min = `0${min}`;
            }
            if (sec.toString().length == 1) {
              sec = `0${sec}`;
            }
            vm.audioDuration = innerAudioContext.duration;
            vm.showTime2 = `${min}:${sec}`;
          }, 1000);
        });
      }
    },
    //拖动进度条事件
    sliderChange(e) {
      var vm = this;
      //获取进度条百分比
      var value = e.detail.value;
      vm.audioTime = value;
      var duration = vm.audioDuration;
      //根据进度条百分比及歌曲总时间，计算拖动位置的时间
      value = parseInt((value * duration) / 100);
      //更改状态
      vm.audioSeek = value;
      vm.isPlayAudio = true;
      //调用seek方法跳转歌曲时间
      innerAudioContext.seek(value);
      //播放歌曲
      innerAudioContext.play();
    },
    //播放、暂停按钮
    playAudio(item, index) {
      //获取播放状态和当前播放时间
      let isPlayAudio = this.isPlayAudio;
      let seek = this.audioSeek;
      if (isPlayAudio) {
        innerAudioContext.pause();
      }
      // 更改播放状态
      this.isPlayAudio = !this.isPlayAudio;

      if (!this.isPlayAudio) {
        // 暂停
        this.audioSeek = innerAudioContext.currentTime;
        console.log(innerAudioContext.currentTime, "pause");
      } else {
        //如果在暂停，获取播放时间并继续播放
        innerAudioContext.src = this.src;
        if (innerAudioContext.duration != 0) {
          this.audioDuration = innerAudioContext.duration;
        }
        //跳转到指定时间播放
        innerAudioContext.seek(seek);
        innerAudioContext.play();

        this.isPlayAudio = true;
        innerAudioContext.duration;
        setTimeout(function () {
          //延时获取音频真正的duration
          let duration = innerAudioContext.duration;
          let min = parseInt(duration / 60);
          let sec = parseInt(duration % 60);
          if (min.toString().length == 1) {
            min = `0${min}`;
          }
          if (sec.toString().length == 1) {
            sec = `0${sec}`;
          }
          this.audioDuration = innerAudioContext.duration;
          this.showTime2 = `${min}:${sec}`;
          this.showTime1 = `00:00`;
        }, 1000);
      }
    },
    loadaudio() {
      var vm = this;
      //设置一个计步器
      this._interval();
      this.durationIntval = setInterval(() => {
        this._interval();
      }, 1000);
    },
    _interval() {
      if (this.isPlayAudio) {
        var seek = this.audioSeek;
        var duration = innerAudioContext.duration;
        var time = this.audioTime;
        time = parseInt((100 * seek) / duration);
        console.log(seek, "?seek");
        //当歌曲在播放时，每隔一秒歌曲播放时间+1，并计算分钟数与秒数
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        //填充字符串，使3:1这种呈现出 03：01 的样式
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        var min1 = parseInt(duration / 60);
        var sec1 = parseInt(duration % 60);
        if (min1.toString().length == 1) {
          min1 = `0${min1}`;
        }
        if (sec1.toString().length == 1) {
          sec1 = `0${sec1}`;
        }
        //当进度条完成，停止播放，并重设播放时间和进度条
        console.log(time, "?time");
        if (time >= 100) {
          innerAudioContext.stop();
          this.audioSeek = 0;
          this.audioTime = 0;
          this.audioDuration = duration;
          this.isPlayAudio = false;
          this.showTime1 = `00:00`;
          return false;
        }
        //正常播放，更改进度信息，更改播放时间信息
        this.audioSeek = seek + 1;
        this.audioTime = time;
        this.audioDuration = duration;
        this.showTime1 = `${min}:${sec}`;
        console.log(this.showTime1, "? this.showTime1");
        this.showTime2 = `${min1}:${sec1}`;
      }
    },
  },
  mounted() {
    this.Initialization();
    this.loadaudio();
  },
  destroyd: function () {
    //卸载页面，清除计步器
    clearInterval(this.durationIntval);
  },
};
</script>
<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.flex {
  display: flex;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.audioPlayer {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  background: #F6F6F6;
}

.player {
  position: relative;
  display: block;
  // margin-left: 20upx;
}

.audioBack {
  width: 100%;
  height: 100%;
}

.audioControls {
  width: 100%;
  // background: black;
  opacity: 0.8;
  position: relative;
  bottom: 0;
  color: white;
  font-size: 6pt;
  line-height: 60rpx;
  text-align: center;
}

.flex .hd {
  flex: 0 0 92rpx;
  width: 92rpx;
  height: 92rpx;

  .image {
    display: block;
    width: 92rpx;
    height: 92rpx;
  }
}

.flex > .bd {
  flex: 1;
  height: 100%;
  margin-left: 18rpx;
}

.slider {
  padding-top: 16rpx;

  slider {
    width: 100%;
    margin: 0;
  }
}

.audioControls .time {
  display: flex;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: color-desc;
  line-height: 32rpx;

  >.bd {
    flex: 1;
    text-align: left;
  }

  >.ft {
    flex: 0 0 auto;
  }
}
</style>
